/*
var iw; // original image width
var ih; // original image height
var fw; // frame width (=length)
var fh; // frame height (=length)
var topH; // frame top position
var leftW; // frame left position
var hlX; // -topH - 1 (used for highlight background positioning)
var hlY; // -leftW - 1 (used for highlight background positioning)
var startX; // initial x position before moving
var startY; // initial y position before moving
var deltaX; // distance, along x-axis, been moved
var deltaY; // distance, along y-axis, been moved
*/
$(document).ready(function() {
	$('.button').button().css('cursor','pointer');

	$("#sortable").sortable();
	$("#sortable").disableSelection();
	
	$('#sortable li').buildContextualMenu({
        menuSelector:".menuContainer",
        menuWidth:150,
        openOnRight:false,
        iconPath:"../images/ico/",
        hasImages:true,
        fadeInTime:100,
        fadeOutTime:200,
        menuTop:0,
        menuLeft:0,
        submenuTop:0,
        submenuLeft:4,
        opacity:1,
        shadow:false,
        shadowColor:"black",
        shadowOpacity:.2,
        openOnClick:true,
        closeOnMouseOut:false,
        closeAfter:500,
        minZindex:"auto",
        hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
        submenuHoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
        onContextualMenu:function(o,e){} //it pass 'o' (the menu you clicked on) and 'e' (the event)
    });
	
	var memberId = $('input[name="id"]').val();
	/* Submit action for saving photos */
	$('a[name="submitPhotoSave"]').bind('click', {
		action:'photo-save.action',
		form:'#photoSaveForm',
		error:'.feedback-pane',
		success:'.feedback-pane',
		chainAction:'../photo.action?memberId='+memberId
	}, ajaxSubmitForm);
	
	$('.close').click(function(event){
		var overlay = $(event.target).parent().parent();
		overlay.fadeOut('fast');
		$('textarea',overlay).val('');
		$(this).parent().find('input').val('');
		$('.ui-widget-overlay').fadeOut('fast');
		$("#sortable").sortable('enable');		
	});
	
	$('.ok').click(function(event){
		var overlay = $(event.target).parent().parent().fadeOut('fast');
		$(this).parent().find('input').val(leftW+','+topH+','+fw+','+fh);
		$('.ui-widget-overlay').fadeOut('fast');
		$("#sortable").sortable('enable');		
	});
	
	$('.highlight').each(function(index){
		$(this).resizable({
			aspectRatio: 1,
			containment: $(this).parent(),
			minHeight: 140,
			resize: photoCropResize,
			stop: photoCropResizeStop
		});
		
		$(this).draggable({
		   containment: $(this).parent(),
		   start: photoCropDragStart,
		   drag: photoCropDrag,
		   stop: photoCropDragStop
		});
	});	
	
});

function closeOverlays(overlayId,action) {
	// reset textarea input
	if(action == 'exit') {
		$('#'+overlayId+' textarea').val('');
	}	
	$('#'+overlayId).fadeOut('fast');
	$('.ui-widget-overlay').fadeOut('fast');
	$("#sortable").sortable('enable');
}

function addCaption(el) {
	if (!el) el= $.mbMenu.lastContextMenuEl;
	var dialog = $(el).next();
	var overlayId = dialog.attr('id');
	dialog.not('.content').prepend('<a class="close" onclick="closeOverlays(\''+overlayId+'\',\'exit\')"></a>').append('<a class="ok" onclick="closeOverlays(\''+overlayId+'\',\'save\')"></a>').wrapInner('<div class="content" />');
	dialog.position({ my: "center", at: "center", of: window }).show();
	$('textarea', dialog).focus();
	$('.ui-widget-overlay').show();
	$("#sortable").sortable("disable");
}

function setCover(el) {
	if (!el) el= $.mbMenu.lastContextMenuEl;
	var dialog = $(el).next().next();
	var overlayId = dialog.attr('id');
	//if(dialog.html().search('content') == -1) {
		// TO-DO : load javascript
	//	dialog.append('<div class="highlight"></div><div class="overlay"></div>').wrapInner('<div class="preview" />').prepend('<a class="close" onclick="closeOverlays(\''+overlayId+'\',\'exit\')"></a><a class="ok" onclick="closeOverlays(\''+overlayId+'\',\'save\')"></a>').wrapInner('<div class="content" />');
	//}
	dialog.position({ my: "center", at: "center", of: window }).show();
	$('.ui-widget-overlay').show();
	$("#sortable").sortable("disable");
	
	photoCropInit(overlayId);
}

function removeImage(el) {
	if (!el) el= $.mbMenu.lastContextMenuEl;
	$(el).parent().remove();
}